<template>
	<div class="top-tool-box">
		<div class="top-tool-left">
			<a-space :size="8">
				<a-tag v-for="(item, index) in dataSource" :key="index" :color="activeKey == index ? '#0666FF' : ''" @click="select(index)">
					{{ item.title }}
					<template v-if="showCount">({{ item.count || 0 }})</template>
				</a-tag>
			</a-space>
		</div>
		<div class="top-tool-right">
			<slot />
		</div>
	</div>
</template>
<script setup lang="ts">
	import {PropType, ref, watch} from 'vue'

	interface tagProps {
		title: string
		count: number
	}

	const activeKey = ref(0)
	const props = defineProps({
		dataSource: {
			type: Array as PropType<tagProps[]>,
			required: true
		},
		index: {
			type: [Number, String],
			default: 0
		},
		showCount: {
			type: Boolean,
			default: true
		}
	})
	const emit = defineEmits(['select'])
	const select = (index: number) => {
		activeKey.value = index
		emit('select', props.dataSource[index])
	}
	watch(
		() => props.index,
		(newVal: any, oldVal: any) => {
			activeKey.value = 0
		}
	)
</script>
